<template>
  <r-com :leftClass="'fj-left-height'" :rightClass="'fj-right-box'" :groupClass="'fj-group-height'">
    <template slot="top-bar">
      <li class="el-icon-s-promotion">番剧</li>
      <li
        class="tabs-item"
        v-for="item in dateList"
        :key="item.index"
        :class="activeIndex==item.index?'tabs-active':' '"
        @click="changeTab(item.index)"
      >{{item.name}}</li>
      <a href="#" class="btn-nfj">
        新番时间表
        <i class="el-icon-arrow-right"></i>
      </a>
    </template>
    <template slot="video-slot">
      <div class="zone-list">
        <a href="#" class="zone-item" v-for="item in 18" :key="item">
          <el-image :src="require('../../assets/icon.jpg')" lazy></el-image>
          <div>
            <p class="zone-title">罪恶王冠</p>
            <p class="num num-update">第115话</p>
          </div>
        </a>
      </div>
    </template>
    <template slot="right-area">
      <div class="rank-box">
        <h3>
          排行榜
          <el-button>
            更多
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </h3>
        <ul class="rank">
          <li>
            <a href="#" class="a-link" v-for="item in 10" :key="item">
              <div class="rank-face">
                <span class="rank-span" :class="item>3?'rank-four':' '">{{item}}</span>
                <p class="title">
                  羊村之狂龙战神
                  <span>更新至第5话</span>
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </template>
  </r-com>
</template>
<script>
import Rc from '../common/RowComponent'
export default {
  data() {
    return {
      activeIndex: '0',
      dateList: {
        new: {
          name: '最新',
          index: '0',
        },
        Mon: {
          name: '周一',
          index: '1',
        },
        Tue: {
          name: '周二',
          index: '2',
        },
        Wed: {
          name: '周三',
          index: '3',
        },
        Thu: {
          name: '周四',
          index: '4',
        },
        Fri: {
          name: '周五',
          index: '5',
        },
        Sat: {
          name: '周六',
          index: '6',
        },
        Sun: {
          name: '周日',
          index: '7',
        },
      },
    }
  },
  components: {
    'r-com': Rc,
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index
    },
  },
}
</script>
<style scoped>
.rank-span {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: #49a5da;
  text-align: center;
  font-size: 14px;
  margin-right: 15px;
  margin-top: 10px;
}
.rank-four {
  background-color: transparent;
  color: #999;
}
.rank-face {
  width: 100%;
  padding-top: 5px;
  display: flex;
  height: 25px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  font-size: 14px;
  height: 20px;
  line-height: 37px;
}
.title span {
  float: right;
  font-size: 12px;
  color: #999;
}
.el-button {
  height: 23px;
  font: 12px;
  background: none;
  outline: none;
  padding: 0px 7px;
  border: 1px solid #ccc;
  margin-right: 0px;
  text-align: center;
}
.rank-box h3 {
  font-size: 19px;
  font-weight: 400;
  height: 40px;
}
.rank-box h3 .el-button {
  float: right;
  transform: scale(0.9);
}
.tabs-item {
  font-size: 15px !important;
  margin-left: 15px;
  line-height: 26px !important;
  cursor: pointer;
}
.tabs-active {
  color: #00a1d6;
  border-bottom: 1px solid #00a1d6;
}
.btn-nfj {
  float: right;
  color: #00a1d6;
  font-size: 15px;
  border: 1px solid #00a1d6;
  padding: 5px 5px 5px 15px;
  transition: all 0.2s;
}
.btn-nfj:hover {
  color: #fff !important;
  background-color: #00a1d6;
}
.zone-list {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  overflow: auto;
}
.zone-item {
  display: flex;
  width: 227px;
  height: 70px;
  margin-right: 20px;
  margin-bottom: 24px;
}
.zone-item .el-image {
  width: 70px;
  height: 70px;
  margin-right: 10px;
}
.zone-title {
  color: #000;
  width: 128px;
  height: 37px;
  line-height: 25px;
  font-size: 14px;
  margin-bottom: 15px;
}
.num {
  color: #999;
  font-size: 12px;
  width: 128px;
  height: 19px;
}
.num-update {
  color: #00a1d6;
}
@media screen and (max-width: 1450px) {
  .zone-item {
    display: flex;
    width: 227px;
    height: 70px;
    margin-right: 00px;
    margin-bottom: 24px;
  }
}
</style>
